import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button,Pagination,Select,message,Popconfirm,Divider,Modal,Row,Col,DatePicker } from 'antd';
import {TimeSpan} from '../../utils';
import styles from './index.less';
const { Option, OptGroup } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
let arrKeySub_5 = {};
const Pages = ({ Allemerg, dispatch, loading }) => {
    const divumns = [
        {
            title: '物资名称',
            dataIndex: 'material_name',
        },
        {
            title: '型号',
            dataIndex: 'model',
        },
        {
            title: '检查周期',
            dataIndex: 'check_time',
        },
        {
            title: '库存点名称',
            dataIndex: 'address_name',
        },
        {
            title: '物资编号',
            dataIndex: 'material_num',
        },
        {
            title: '数量',
            dataIndex: 'quantity',
        },
        {
            title: '过期时间',
            dataIndex: 'overdue_time',
            render:text => TimeSpan(text),
        },
        {
            title: '状态',
            dataIndex: 'stat',
        },
        {
            title: '描述',
            dataIndex: 'remark',
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            render:text => TimeSpan(text),
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <a onClick={()=>{
                    localStorage.setItem('id',record.id);
                    // window.open('/AllEmergencysupplies_list')
                    dispatch({type:'app/goToPath',payload:'AllEmergencysupplies_list'});
                }}>查看</a>
            </div>,
        },
    ];

    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...Allemerg} loading={loading.global}/>
            <Table
                columns={divumns}
                rowKey={id=>id.id}
                loading={loading.global}
                pagination={false}
                size="small"
                dataSource={Allemerg.getAllemergData || null} />
            <Pagination current={Allemerg.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={Allemerg.total}
                onChange={pages => { !loading.global && dispatch({type:'Allemerg/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            m_name: '',
            material_id: '',
            address_id :'',
            material_num:"",
            quantity:'',
            overdue_time:'',
            stat:'',
            remark:"",
            addressbooks:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"Allemerg/getAllemerg",payload:{
            m_num: '',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){

        let { pages,record,view ,dispatch,YJDZ,TXL,YJWZ,loading} = this.props;
        let YJWZObj ={},YJDZObj ={};
        YJWZ && YJWZ.map(item =>{
            YJWZObj[item.name] = item.id;
        });
        YJDZ && YJDZ.map(item =>{
            YJDZObj[item.name] = item.id;
        });
        return (
            <div className={styles.containerit}>
                <Input value={this.state.m_num } placeholder="物资编号" style={{margin:10,width:256}}
                    onChange={e=>this.setState({m_num:e.target.value})}/>
                <Button type='primary' onClick={()=>{
                    let {m_num} = this.state;
                    this.props.dispatch({type:"Allemerg/getAllemerg",payload:{
                        m_num: m_num,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"Allemerg/save",payload:{view:true,record:{}}});
                    dispatch({type:"Allemerg/newPost"});
                    this.setState({
                        material_id: '',
                        address_id :'',
                        material_num:"",
                        quantity:'',
                        overdue_time:'',
                        stat:'',
                        remark:"",
                        addressbooks:[],
                    });
                }}>新增物资信息</Button>
                <Modal
                    title={record.id?"修改物资信息":"添加物资信息"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {material_id,address_id,material_num,quantity,overdue_time,stat,remark,addressbooks} =this.state;
                        if(material_id && address_id && material_num && quantity && overdue_time && remark && addressbooks.length != 0){
                            let arr = [];
                            addressbooks.map(item =>{
                                arr.push(arrKeySub_5[item]);
                            });
                            let body ={
                                material_id: YJWZObj[material_id],
                                address_id :YJDZObj[address_id],
                                material_num:material_num,
                                quantity:quantity,
                                overdue_time:overdue_time,
                                stat:stat,
                                remark:remark,
                                addressbooks:arr,
                            };
                            if(record.id){
                                body.id = record.id;
                                dispatch({type:"Allemerg/putAllemerg",payload:body});
                            }else{
                                dispatch({type:"Allemerg/postAllemerg",payload:body});
                            }

                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"Allemerg/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>关联应急物资基本信息:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.material_id || undefined } placeholder="应急物资基本信息" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                showSearch
                                onChange={value=>{
                                    this.setState({
                                        material_id:value,
                                    });
                                }}>
                                {
                                    YJWZ && YJWZ.map(item=>{
                                        return <Option key={item.id} value={item.name}>{item.name}</Option>;
                                    })
                                }
                            </Select>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>关联应急物资地点信息:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.address_id || undefined} placeholder="应急物资地点信息" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                showSearch
                                onChange={value=>{
                                    this.setState({
                                        address_id:value,
                                    });
                                }}>
                                {
                                    YJDZ && YJDZ.map(item =>{
                                        return <Option key={item.id} value={item.name}>{item.name}</Option>;
                                    })
                                }
                            </Select>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>物资编号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({material_num: e.target.value})}
                                value={this.state.material_num}
                                placeholder="物资编号"/>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>数量:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({quantity: e.target.value})}
                                value={this.state.quantity}
                                placeholder="数量"/>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>失效时间:</span></Col>
                        <Col span={14}>
                            <DatePicker style={{width: 300, marginBottom: 10, marginTop: -4}} placeholder="失效时间"
                                onChange={(date, dateString) => this.setState({overdue_time: dateString})} />
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>应急物资状态:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.stat || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        stat:value,
                                    });
                                }}>
                                <Option value='1'>正常</Option>
                                <Option value='2'>已使用</Option>
                                <Option value='3'>已失效</Option>
                            </Select>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>负责人:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.addressbooks} placeholder="通讯录人员" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        addressbooks:value,
                                    });
                                }}>
                                {
                                    TXL && this.renderTreeNodes_5(TXL)
                                }
                            </Select>
                        </Col>
                        <Col span={8}><span style={{float:'right',marginRight:10}}><span style={{color:'red'}}>*</span>描述:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({remark: e.target.value})}
                                value={this.state.remark}
                                placeholder="描述"/>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
    renderTreeNodes_5 = data => data.map((item) => {
        if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
            arrKeySub_5[item.id] = true;
            return (
                <OptGroup label={item.s_name}key={item.id}>
                    {this.renderTreeNodes_5(item.roleList)}{this.renderTreeNodes_5(item.orgList)}
                </OptGroup>
            );
        }
        if(arrKeySub_5[item.id]){
            return;
        }
        if(item.s_name){
            arrKeySub_5[item.id] = true;
        }
        arrKeySub_5[item.rolr_name] = item.id;
        return <Option key={item.id} value={item.rolr_name || item.s_name}>{item.rolr_name || item.s_name}</Option>;
    });
    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {userName,aliasName,phone,emailAddr} = nextProps.record;
            this.setState({
                userName: userName,
                aliasName:aliasName,
                phoneADD:phone,
                emailAddr:emailAddr,
            });
        }
        if(nextProps.pages !== this.props.pages){
            let {m_name} = this.state;
            this.props.dispatch({type:"Allemerg/getAllemerg",payload:{
                m_name: m_name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


Pages.propTypes = {
    Allemerg: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ Allemerg, loading }) => ({ Allemerg, loading }))(Pages);
